<keira-top-bar [selected]="handlerService.selected" [selectedName]="handlerService.selectedName" [isNew]="handlerService.isNew" />

<div class="container-fluid">
  @if (editorService.loading) {
    <span [translate]="'LOADING'"></span>
  }

  @if (editorService.form && !!editorService.loadedEntityId && !editorService.loading) {
    <div>
      <div class="content-block">
        <keira-query-output
          [docUrl]="docUrl"
          [isNew]="editorService.isNew"
          [diffQuery]="editorService.diffQuery"
          [fullQuery]="editorService.fullQuery"
          [error]="editorService.error"
          [entityTable]="editorService.entityTable"
          [editorService]="editorService"
          (executeQuery)="save($event)"
        />
      </div>
      <form [formGroup]="editorService.form" class="form-group edit-form">
        <div class="content-block">
          <div class="row">
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="Ground">Ground</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE_MOVEMENT.GROUND' | translate"></i>
              <select [formControlName]="'Ground'" id="Ground" class="form-control form-control-sm">
                <option [ngValue]="0">0 - None</option>
                <option [ngValue]="1">1 - Run</option>
                <option [ngValue]="2">2 - Hover</option>
              </select>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="Swim">Swim</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE_MOVEMENT.SWIM' | translate"></i>
              <select [formControlName]="'Swim'" id="Swim" class="form-control form-control-sm">
                <option [ngValue]="0">0 - None</option>
                <option [ngValue]="1">1 - Swim</option>
              </select>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="Flight">Flight</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE_MOVEMENT.FLIGHT' | translate"></i>
              <select [formControlName]="'Flight'" id="Flight" class="form-control form-control-sm">
                <option [ngValue]="0">0 - None</option>
                <option [ngValue]="1">1 - Disable Gravity</option>
                <option [ngValue]="2">2 - Can Fly</option>
              </select>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="Rooted">Rooted</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE_MOVEMENT.ROOTED' | translate"></i>
              <select [formControlName]="'Rooted'" id="Rooted" class="form-control form-control-sm">
                <option [ngValue]="0">0 - None</option>
                <option [ngValue]="1">1 - Rooted</option>
              </select>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="Chase">Chase</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE_MOVEMENT.CHASE' | translate"></i>
              <select [formControlName]="'Chase'" id="Chase" class="form-control form-control-sm">
                <option [ngValue]="0">0 - None</option>
                <option [ngValue]="1">1 - Can Walk</option>
                <option [ngValue]="2">2 - Always Walk</option>
              </select>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="Random">Random</label>
              <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.TEMPLATE_MOVEMENT.RANDOM' | translate"></i>
              <select [formControlName]="'Random'" id="Random" class="form-control form-control-sm">
                <option [ngValue]="0">0 - Walk</option>
                <option [ngValue]="1">1 - Can Run</option>
                <option [ngValue]="2">2 - Always Run</option>
              </select>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
              <label class="control-label" for="InteractionPauseTimer">InteractionPauseTimer</label>
              <i
                class="fas fa-info-circle ms-1"
                placement="auto"
                [tooltip]="'CREATURE.TEMPLATE_MOVEMENT.INTERACTION_PAUSE_TIMER' | translate"
              ></i>
              <input
                [formControlName]="'InteractionPauseTimer'"
                id="InteractionPauseTimer"
                type="number"
                class="form-control form-control-sm"
              />
            </div>
          </div>
        </div>
      </form>
    </div>
  }
</div>
